<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-<if condition="$type eq 1">0元学<else/>体验课</if></title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=0724" />
	</head>
	<style>
		html{background:#3D988F;}
		.backgroundCheng{background:#F19600;}
		.moreList{text-align: center;font-size:.72rem;color:#fff;line-height:2.5rem;display: none;}
	</style>
	<body>
		<!-- 0元学 --> 
		<div class="activeIndex <if condition="$type eq 2">backgroundCheng</if>">
			<img src="{$logo}" alt="" class="activeTop">
			<div class="content">
				<div class="thisList">
					<foreach name="$course_list" item="vo">
						<a href="/course_details?course_id={$vo.id}&invite_code={$invite}">
							<div class="item flex alitemCenter">
								<div class="curriculumImg"><img src="{$vo.xt_logo}" alt=""></div>
								<div class="curriculumInfo">
									<h3>{$vo.title}</h3>
									<div class="typeList flex flexWrap alitemCenter">
										<foreach name="$vo.label" item="vo_two">
							                   <span>{$vo_two.label}</span>
							            </foreach>
									</div>
									<div class="curriculumMoney flex juscbtween">
										<div class="left">
											<b><i>￥</i>{$vo.sell_money}</b>
											<span>{$vo.original_money}</span>
										</div>
										<button>马上抢</button>
									</div>
								</div>
							</div>
						</a>	
					</foreach>
				</div>
				<div class="moreList">正在加载</div>
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
	<script>
		$(function(){
		    //上拉加载
		    var pageNum = 1;
			$(window).scroll(function () {
			    //滚动条滚动时调用
			    var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度
			    var scrollHeight = $(document).height(); //当前页面的总高度
			    var windowHeight = $(this).height(); //当前window的高度
				var status = $('.order_tab .on').attr('value') || '';
			    if (scrollTop+3 + windowHeight >= scrollHeight) {
			    	$('.moreList').show();
			    	pageNum += 1;
				    $.ajax({
				      	url: '/zero_study',
				      	type: 'post',
				      	data: {
				      		"page":pageNum,
				        	"type": {$type}
				      	},
				      	success: function success(d) {
				      		console.log(d)
				      		if(d.code == 0){
					      		if(d.data){
					      			var htm = '';
					      			for(let i=0;i<d.data.course_list.length;i++){
					      				const item = d.data.course_list[i];
					      				htm += `
											<a href="/course_details?course_id=`+item.id+`&invite_code=`+d.data.invite+`">
												<div class="item flex alitemCenter">
													<div class="curriculumImg"><img src="`+item.xt_logo+`" alt=""></div>
													<div class="curriculumInfo">
														<h3>`+characterLength(item.title,25)+`</h3>
														<div class="typeList flex flexWrap alitemCenter">`;
															for(let o=0;o<item.label.length;o++){
												                htm += `<span>`+item.label[o].label+`</span>`;
												            }
														htm += `</div>
														<div class="curriculumMoney flex juscbtween">
															<div class="left">
																<b><i>￥</i>`+item.sell_money+`</b>
																<span>`+item.original_money+`</span>
															</div>
															<button>马上抢</button>
														</div>
													</div>
												</div>
											</a>`;
					      			}
					      			$('.thisList').append(htm);
					      		}
				      		}
				      		$('.moreList').html('没有更多了')
				      	},
				      	error: function error(e) {
				        	console.log(e);
				      	}
				    })
			    }
			});

		    // 字符长度限制
		    function characterLength(v, n){
		        if(v){
		            const len = v.length;
		            return len > n ? v.substr(0, n) + '...' : v
		        }else{
		            return v;
		        }
		    }
		})
	</script>
</html>
